<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>宠物信息</title>


    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">


    <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>

</head>
<style>
    body{
        height: 600px;
        width: 700px;
        margin: 40px auto;
    }
    #two{
        margin: 0 auto;
    }
    #two td{
        padding:5px 0px
    }
</style>
<div>
    <form th:action="@{/add}" method="post">
    <h3 style="text-align: center">宠物基本信息</h3>
    <table id="two">
        <tr>
            <td>昵称：</td>
            <td><input type="text" name="petname" id="name"></td>
        </tr>
        <tr>
            <td>品种：</td>
            <td>
                <select name="petbreed">
                <option value=0>--请选择--</option>
                <option value=1>狗</option>
                <option value=2>猫</option>
                <option value=3>鸟</option>
                <option value=4>兔</option>
            </select>
            </td>
        </tr>
        <tr>
            <td>性别：</td>
            <td>
                <input type="radio" name="petsex" value="1">雄
                <input type="radio" name="petsex" value="2">雌
            </td>
        </tr>
        <tr>
            <td>出生日期：</td>
            <td>
                <input type="text" name="birthday" id="day">yyyy-MM-dd
            </td>
        </tr>
        <tr>
            <td>宠物描述：</td>
            <td>
                <input type="text" name="decsription">
            </td>
        </tr>

        <tr>
            <td><input type="submit" value="提交"></td>
            <td>
                <input type="reset" value="重置">
            </td>
        </tr>
        </table>
    </form>
</div>

<body>


<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<script>
    window.onsubmit=function(){
        var name=document.getElementById('name').value;
        var day=document.getElementById('day').value;
        dateFormat = /^(\d{4})-(\d{2})-(\d{2})$/;
        if(name=='')
        {
            alert('用户名不能为空');
            return false;
        }
        if(day=='')
        {
            alert('出生日期不能为空');
            return false;
        }
        if (!dateFormat.test(day)) {
            alert("日期格式不正确！");
            return false;
        } else {
            return true;
        }
    }
</script>
</body>
</html>